﻿<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" id="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <meta charset="utf-8" />
    <link href="css.css" rel="stylesheet" />
</head>
<body>
    <div class="del_head"><img src="delheadbg.png" /><img class="delIcon" src="del/del_000.png" /></div>
    <ul class="icons">
        <li><div><img src="bohao.png" /></div></li>
        <li>
            <div><img src="jisuanji.png" /></div>
        </li>
        <li><div><img src="liulangqi.png" /></div></li>
        <li><div><img src="shoudiantong.png" /></div></li>
        <li><div><img src="xianji.png" /></div></li>
        <li><div><img src="zhuti.png" /></div></li>
        <li><div><img src="wenjianjia.png" /></div></li>
    </ul>
    <div class="drag"><img src="bohao.png" /></div>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <script>
        $(function () {
            var startTime = 0, minTime = 150, timeOut, isTouch,
                point, _this, _thisImg, drag = $(".drag"), isDelArea;
            $(".icons li").on("touchstart", function (e) {
                _this = $(this);
                point = e.originalEvent.touches[0];
                console.log(point);
                startTime = +new Date;
                timeOut = setTimeout(function () {
                    isTouch = true;
                    console.log("触发发按");
                    $(".del_head").addClass("show");
                    _thisImg = _this.find("img");
                    drag.show().css({
                        top: point.pageY - _thisImg.width() / 2,
                        left: point.pageX - _thisImg.height() / 2,
                        width: _thisImg.width() * 1.3,
                        height: _thisImg.height() * 1.3
                    }).fadeIn().find("img").attr("src", _thisImg.attr("src"));
                    $(".icons").addClass("an");
                }, minTime);
                e.preventDefault();
            });

            $(".icons li").on("touchmove", function (e) {
                var newPoint = e.originalEvent.touches[0];
                if (!isTouch) {
                    if (Math.abs(newPoint.pageX - point.pageX) > 10 || Math.abs(newPoint.pageY - point.pageY) > 10) {
                        clearTimeout(timeOut);
                    }
                    isTouch = false;
                    return
                };

                drag.css({
                    top: newPoint.pageY - _thisImg.width() / 2,
                    left: newPoint.pageX - _thisImg.height() / 2
                }).fadeIn();
                isDelArea = newPoint.pageY < 70;
                if (isDelArea) {
                    $(".del_head").addClass("delstatus");
                } else {
                    $(".del_head").removeClass("delstatus");
                }
                e.preventDefault();
            });

            $(".icons li").on("touchend", function (e) {
                console.log("放开 ");
                if (isTouch && isDelArea) {
                    _thisImg.remove();
                    console.log($(".delIcon").offset());
                    drag.addClass("deling");

                    drag.css({
                        top: $(".delIcon").offset().top,
                        left: $(".delIcon").offset().left + 5,
                        width: 20,
                        height: 20
                    });

                    setTimeout(function () {
                        drag.removeClass("deling");
                        $(".icons").removeClass("an");
                        $(".del_head").removeClass("show delstatus");
                        drag.hide();
                    }, 700);
                } else {
                    $(".icons").removeClass("an");
                    $(".del_head").removeClass("show delstatus");
                    drag.hide();
                }

                isTouch = false;
                clearTimeout(timeOut);

                isDelArea = false;

                e.preventDefault();
            });

        })

    </script>
</body>

</html>
